<template>
  <div>
    <TopBar />
    <div class="w1200 outterbox">
      <aside class="leftside">
        <PersonInfo @func-jump="funcJump" />
        <FuncList @func-jump="funcJump" />
      </aside>
      <main class="rightmain">
        <!-- 路由不缓存 -->
        <!-- <router-view></router-view> -->

        <!-- 路由缓存 -->
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </main>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, inject } from 'vue'
import { useRouter } from 'vue-router'

import api from '@/request/api'
const axios = inject('axios')

import PersonInfo from '@/views/index/personinfo.vue'
import FuncList from '@/views/index/funclist.vue'

import TopBar from '@/components/index/topbar.vue'

const router = useRouter()

onMounted(async () => { })

// 子路由操作路由跳转 切换主视图
function funcJump(cName) {
  router.push({
    name: cName
  })
}
</script>

<style scoped>
.outterbox {
  display: flex;
  height: 100vh;
}

.leftside {
  width: 220px;
  background-color: #f9f9f9;
  flex-grow: 0;
}

.rightmain {
  width: 1040px;
  background-color: #f2f4f7;
  flex-grow: 0;
}
</style>
